<!--
 * @Author: your name
 * @Date: 2019-11-12 14:31:05
 * @LastEditTime : 2019-12-18 14:31:18
 * @LastEditors  : Please set LastEditors
 * @Description: 倒计时组件
 * @FilePath: \vue_et\src\components\Countdown.vue
 -->
<template>
<div class="countdown_custom f36 white">
    <span v-show="hours>0">{{hours}}:</span>
    <span v-show="minutes">{{minutes}}:</span>
    <span v-show="secounds">{{secounds}}</span>
</div>
</template>
<script>
export default {
    name:"CountDown",
    props:{
        endTime:{
            type:[String,Number],
            default:(new Date().getTime()/1000+60*60*24).toString()
        },
    },
    data(){
        return{
            now_date:new Date(),
            hours:'',
            minutes:'',
            secounds:'',
            flag:false,
            timer:null,//定时器
        }
    },
    mounted () {
        this.timer = setInterval(() => {
            if(this.flag == true){
                clearInterval(this.timer);
                this.timer = null;
                return;
            }
            this.timeDown();
        }, 500);
        console.log('this.endTime',this.endTime);
    },  
    methods:{
        timeDown(){
            let time = parseInt((Number(this.endTime)*1000-new Date().getTime())/1000);
            let d = parseInt(time/(24*60*60));
            let h = parseInt(time/(60*60)%24);
            this.hours = h>9?h:`0${h}`;
            let m = parseInt(time/60%60);
            this.minutes = m>9?m:`0${m}`;
            let s = parseInt(time%60);
            this.secounds = s>9?s:`0${s}`;
            if(time <= 0){
                this.flag = true;
                this.secounds="00";
                this.hours="00";
                this.minutes="00";
                this.$emit('timeEnd');
                return;
            }
        }
    },
    beforeDestroy(){
        clearInterval(this.timer);
        this.timer = null;
    }
}
</script>
<style lang="less" scoped>
.white{color:@font-white}
.countdown_custom{
    display: inline-block;
    padding:10px;
}
</style>